// JavaScript Document
// JavaScript Document
$(document).ready(function(){
        //parametros principales
       
        var contenidoHTML = '<div class="logo"><img src="Imagenes/linkenslogo200.png" width="205" height="200" /></div><div class="texto"><p>Para restablecer tus datos, escribe tu dirección de correo electrónico registrado a tu cuenta de Linkens.</p><form action="" method="get" name="contrasena">Dirección de correo electrónico<br /><input name="correo" type="text" size="32" /><br /><input name="enviar" type="button" value="Enviar" /></form></p><button onclick=\"closeModal()\">Cerrar</button></div>';
       
        var ancho = 685;
        var alto = 210;
		
		//$('head').append('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');

        $('#button').click(function(){
                // fondo transparente
                // creamos un div nuevo, con dos atributos
                var bgdiv = $('<div>').attr({
                                        className: 'bgtransparent',
                                        id: 'bgtransparent'
                                        });
               
                // agregamos nuevo div a la pagina
                $('body').append(bgdiv);
               
                // obtenemos ancho y alto de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();
               
                //establecemos las dimensiones del fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
               
               
                // ventana modal
                // creamos otro div para la ventana modal y dos atributos
                var moddiv = $('<div>').attr({
                                        className: 'bgmodal',
                                        id: 'bgmodal'
                                        });    
               
                // agregamos div a la pagina
                $('body').append(moddiv);

                // agregamos contenido HTML a la ventana modal
                $('#bgmodal').append(contenidoHTML);
               
                // redimensionamos para que se ajuste al centro y mas
                $(window).resize();
        });

        $(window).resize(function(){
                // dimensiones de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();

                // estableciendo dimensiones de fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
               
                // estableciendo tamaño de la ventana modal
                $('#bgmodal').css("width", ancho+'px');
                $('#bgmodal').css("height", alto+'px');
               
                // obtiendo tamaño de la ventana modal
                var wcnt = $('#bgmodal').width();
                var hcnt = $('#bgmodal').height();
               
                // obtener posicion central
                var mleft = ( wscr - wcnt ) / 2;
                var mtop = ( hscr - hcnt ) / 2;
               
                // estableciendo ventana modal en el centro
                $('#bgmodal').css("left", mleft+'px');
                $('#bgmodal').css("top", mtop+'px');
        });
       
 });
       
function closeModal(){
        // removemos divs creados
        $('#bgmodal').remove();
        $('#bgtransparent').remove();
}
